<template>
    <div>
        <div>
            <button>toggle</button>
            <p>娱乐区:{{ name }}</p>
            <button @click="fun">按钮</button>
        </div>
        <transition></transition>
    </div>
</template>
<script>

export default ({
    name:'three',
    data(){
        return{
            name:'小红'
        }
    },
    methods:{
        fun(){
            this.name = 'xiaoming';
        }
    }

})
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
button{
    margin: 0;
    height: 30px;
    line-height: 30px;
}
.fade-enter{ /* 进来之前的透明度 */
    opacity: 1;
}
.fade-enter-active{ /* 过度状态 */
    transition: 1s all;
}
.fade-enter-to{ /* 进来之后的透明度 */
    opacity: 0;
}
.fade-enter{ /* 进来之前的透明度 */
    opacity: 0;
}
.fade-enter-active{ /* 过度状态 */
    transition: 3s all;
}
.fade-enter-to{ /* 进来之后的透明度 */
    opacity: 1;
}
</style>